<template>
  <div class="about">
    <Header></Header>
    <div class="banner-wrap">
      <div class="banner main-container">
        <img style="visibility: hidden;" src="~@/assets/img/img_10_9.png" alt />
      </div>
    </div>
    <div class="section-list">
      <div class="section section1">
        <div class="section-inner main-container">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">关于我们</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <p>魔法云是专注于在线直播的综合服务平台，隶属脉格信息技术（北京）有限公司，凭借在流媒体技术领域、教育、新媒体营销服务的十二年行业经验，公司从产品研发，SaaS平台服务，行业解决方案实施，售后等方面具备完整的服务体系。</p>
            <p>旗下产品有知识付费、在线教育、政企直播、企业内训、直播带货、营销拓客六大板块。同时为企事业和学校提供在线直播和在线教育的私有化部署解决方案。</p>
          </div>
        </div>
      </div>
      <div class="section section2">
        <div class="section-inner main-container">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">我们的理念</div>
          </div>
          <div class="section-body">
            <el-row :gutter="40">
              <el-col class="scrollRevealTop0" :sm="{span:8}" :xs="24">
                <div class="card">
                  <h1>
                    <div>
                      <p>使命</p>
                      <p>Mission</p>
                    </div>
                    <img src="~@/assets/img/img_10_10.png" alt />
                  </h1>
                  <p>推送教育培训数字化转型</p>
                </div>
              </el-col>
              <el-col class="scrollRevealTop0" :sm="{span:8}" :xs="24">
                <div class="card">
                  <h1>
                    <div>
                      <p>愿景</p>
                      <p>vision</p>
                    </div>
                    <img src="~@/assets/img/img_10_11.png" alt />
                  </h1>
                  <p>做最优秀的在线教育综合服务商</p>
                </div>
              </el-col>
              <el-col class="scrollRevealTop0" :sm="{span:8}" :xs="24">
                <div class="card">
                  <h1>
                    <div>
                      <p>价值观</p>
                      <p>Sense of worth</p>
                    </div>
                    <img src="~@/assets/img/img_10_12.png" alt />
                  </h1>
                  <p>成就客户，合作共赢，诚信立本</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
    <fixed-btn></fixed-btn>
  </div>
</template>

<script>
import Header from "@/components/header";
import Footer from "@/components/footer";
import FixedBtn from "@/components/FixedBtn";
import common from "@/assets/js/common";

export default {
  name: "about",
  mixins: [common],
  components: {
    Header,
    Footer,
    FixedBtn
  }
};
</script>

<style lang="scss" scoped>
::v-deep .header-wrap .header.transparent {
  background-color: rgba(255, 255, 255, 0.2);
}
.banner-wrap {
  background: #2e3459 url(~@/assets/img/img_10_9.png) center no-repeat;
  //   background-size: auto 100%;
  background-size: cover;
  .banner {
    background: none;
  }
}
.section-list {
  .section {
    background-color: rgb(240, 242, 245);
    &:nth-child(odd) {
      background-color: rgb(240, 242, 245);
    }
    .section-inner {
      .section-body {
      }
    }
    &.section1 {
      .section-inner {
        .tit-container {
          .tit {
            color: #1c1c1c;
            font-weight: 600;
          }
        }
        .section-body {
          p {
            font-size: 14px;
            color: #5b5b5b;
            line-height: 2;
            text-indent: 2em;
            padding: 0 20px;
          }
        }
      }
    }
    &.section2 {
      .section-inner {
        .tit-container {
          .tit {
            color: #1c1c1c;
            font-weight: 600;
          }
        }
        .section-body {
          .card {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 0 5px 5px rgba(218, 218, 218, 0.1);
            border-radius: 8px;
            padding: 16px;
            white-space: nowrap;
            margin: 0 16px 25px;
            h1 {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 12px;
              p {
                color: #353535;
                font-size: 18px;
                line-height: 2;
              }
              img {
                width: 20%;
              }
            }
            > p {
              color: #7d7d7d;
              font-size: 14px;
              line-height: 2;
            }
          }
        }
      }
    }
  }
}
</style>